今天在找資料的時候才知道，原來還有::part()和::theme()可以用在shadow DOM的CSS設定，但今天來不及修改上一篇文章了，明天才有時間修改。

己經廢除的部分

HTML import

這個功能本來是web component技術的一部分，用來把web component分成使用'template'元素寫成的html、使用'script'寫成的javascript和使用'style'寫成的CSS。但因為各種原因，本功能只有短暫存在chrome的幾個版本之中。

如果各位有使用過vue，vue的單文件模式的外觀和HTML import的外觀很像。

<template>
...
</template>
<script>
...
<script>
<style>
...
<style>

:shadow()和/deep/

這二個CSS選擇子的功能都是用來'深入'web component中的Shadow DOM設定CSS。但因為很不實用(要知道Shadow DOM內部的DOM結構)，加上瀏覧器實做上有難度。本功能只有短暫存在chrome的幾個版本之中。

指向web component的選擇器 /deep/ Shadow DOM的選擇器 {
    ...
}

如果各位有使用過vue，vue的較早的版本可以使用/deep/，web component的使用方式和vue的一模一樣

例子：如果想要把組件內部的class為'title'的div元素的color改成紅色

HTML

<my-component class='class1'></my-component>

CSS

.class1 /deep/ div.title {
    color: red
}

不穩定的技術

以下列出的技術，並不是所有的主流瀏覧器都能正常的使用，有些瀏覧器沒有支援，有些是瀏覧器在實做上有bug。

extends 現有的HTML element

custom element 除了 extends HTMLElement之外，也可以extends 一些現有的HTML元素。可以創造一個繼承現有HTML元素所有參數和方法的web component。

1. 不是所有的HTML Element都能extends（我記得MDN 有列表，但一時找不到）
2. 從那個HTML元素繼承的，就只能綁定在相同的HTML元素上。
3. safari不支援這個技術

也不是要hate safari，畢竟這功能真的沒什麽用。但一想到100vh，我還是會滿肚子苦水。

<-- 使用is屬性來綁web component -->
<div is="my-div">Hallo World!</div>
<-- 會報錯，因為只能綁在div元素 -->
<p is="my-div">Hallo World!</p>

class MyDiv extends HTMLDivElement { //因為是extends div元素
    ...
}
//設定成該web component只能用在div元素
customElements.define('my-div', MyDiv, { extends: 'div' }); 

:host() 和 :host-content()

從功能上來看，算是:shadow()和/deep/的下一代版本。但因為safari在使用上會有bug，建議平時還是不要使用的好。

結構

:host(Shadow DOM的選擇器) {
    ...
}

例子

.class1 /deep/ div.title {
    color: red
}
.class1:host(div.title) {
    color: red
}

注意，和上一篇的:host不一樣